<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" import="java.util.List"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta charset="UTF-8">
<title>Attendance check</title>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/icons.css" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style>
.teacher-add-pop {
	display: none;
	width: 280px;
	padding: 15px 20px;
	background-color: #FFFFFF;
	-webkit-box-shadow: 0px 0px 9px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 0px 0px 9px 0px rgba(50, 50, 50, 0.75);
	box-shadow: 0px 0px 9px 0px rgba(50, 50, 50, 0.75);
}

.item {
	margin-bottom: 10px;
}

.shadow {
	display: none;
	width: 100%;
	min-height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	overflow: hidden;
	position: fixed;
	top: 0px;
	left: 0px;
}
</style>
</head>
<body>
	<div class="wrapper wcol-12">
		<div class="header">
			<ul class="header__nav col-9">
				<li class="header__nav--active"><a href="admin">Teachers</a>
				</li>
				<li><a href="admin?database">Database</a>
				</li>
				<li><a href="admin_support">Support</a>
				</li>
			</ul>
			<ul class="header__nav--right">
				<li><a href="#"><c:out value="${admin.id} "></c:out>
				</a> <!-- <ul class="header__nav--dropdown">
                        <li><a href="#">Account settings</a></li>
                        <li><a href="#">Log out</a></li>
                    </ul> --></li>
				<li><a href="admin?logout">Log out</a>
				</li>
			</ul>
		</div>
		<div class="content">
			<table class="content__list col-12">
				<thead>
					<tr>
						<th>ID</th>
						<th>Surname</th>
						<th>Name</th>
						<th>Email</th>
					</tr>
				</thead>
				<tbody>
					<div class="scrollable">
						<c:forEach items="${teachers}" var="oneTeacher">
							<tr data-col="${oneTeacher.id}">
								<td><c:out value="${oneTeacher.id}"></c:out></td>
								<td><c:out value="${oneTeacher.surname}"></c:out></td>
								<td><c:out value="${oneTeacher.name}"></c:out></td>
								<td><c:out value="${oneTeacher.email}"></c:out></td>
							</tr>
						</c:forEach>
					</div>
				</tbody>
			</table>
			<a href="#" class="btn-green" id="teacher-add"><i class="i-add73"></i>Add
				teacher</a> <a href="#" id="teacher-delete" class="btn-red">Delete
				teacher</a>
			<div class="shadow">
				<div class="teacher-add-pop">
					<div class="item">
						<label for="id">ID<span id="error-id"
							style="display: none; color: red;"></span>
						</label> <input type="text" name="id" class="input" id="id" />
					</div>
					<div class="item">
						<label for="name">Name<span id="error-name"
							style="display: none; color: red;"></span>
						</label> <input type="text" name="name" class="input" id="name" />
					</div>
					<div class="item">
						<label for="surname">Surname<span id="error-surname"
							style="display: none; color: red;"></span>
						</label> <input type="text" name="surname" class="input" id="surname" />
					</div>
					<div class="item">
						<label for="email">Email<span id="error-email"
							style="display: none; color: red;"></span>
						</label> <input type="email" name="email" class="input" id="email" />
					</div>
					<div class="item">
						<label> </label> <input id="teacher-pop-submit" type="submit"
							class="btn-green" value="Add" style="width: 100px;" /> <a href=""
							class="" id="teacher-pop-cancel">Cancel</a>
					</div>
				</div>
			</div>
		</div>
		<div class="footer"></div>
	</div>
	<script type="text/javascript">
		$(document)
				.ready(
						function() {
							$("table tbody tr").click(
									function() {
										var t = $(this);
										t.toggleClass("selected");
										t.siblings().removeClass("selected");
										$("#teacher-delete").attr(
												"href",
												"/admin?command=delete&id="
														+ t.attr("data-col"));
									});

							$("#teacher-delete")
									.click(
											function(ev) {
												ev.preventDefault();
												var id = $(".selected").attr(
														"data-col");
												$
														.ajax({
															url : "admin",
															type : "POST",
															data : "command=delete&id="
																	+ encodeURIComponent(id),
															success : function(
																	resp) {
																if (resp == 0)
																	alert("Some error at server side occured, please try again later");
																if (resp == 1)
																	$(
																			".selected")
																			.remove();
															}
														});
											});

							$("#teacher-add").click(function() {
								var pop = $(".teacher-add-pop");
								var popWidth = pop.width();
								var popHeight = pop.height();
								var width = $(window).width();
								var height = $(window).height();
								$(".shadow").css("display", "block");
								pop.css({
									"left" : (width - popWidth) / 2,
									"top" : (height - popHeight) / 5,
									"position" : "fixed",
									"display" : "block",
									"z-index" : 1000
								});
							});

							$("#teacher-pop-submit")
									.click(
											function(ev) {
												ev.preventDefault();
												var id = $('input[name="id"]')
														.val();
												var name = $(
														'input[name="name"]')
														.val();
												var surname = $(
														'input[name="surname"]')
														.val();
												var email = $(
														'input[name="email"]')
														.val();
												id = jQuery.trim(id);
												name = jQuery.trim(name);
												surname = jQuery.trim(surname);
												email = jQuery.trim(email);
												var flag = true;
												if (id == "") {
													$("#error-id").css(
															"display", "block");
													$("#error-id").text(
															"Required field");
													flag = false;
												}
												if (name == "") {
													$("#error-name").css(
															"display", "block");
													$("#error-name").text(
															"Required field");
													flag = false;
												}
												if (surname == "") {
													$("#error-surname").css(
															"display", "block");
													$("#error-surname").text(
															"Required field");
													flag = false;
												}
												if (email == "") {
													$("#error-email").css(
															"display", "block");
													$("#error-email").text(
															"Required field");
													flag = false;
												}
												if (flag) {
													console.log(id + " " + name
															+ " " + surname
															+ " " + email);
													$
															.ajax({
																url : "admin",
																type : "POST",
																data : "command=add&id="
																		+ encodeURIComponent(id)
																		+ "&name="
																		+ encodeURIComponent(name)
																		+ "&surname="
																		+ encodeURIComponent(surname)
																		+ "&email="
																		+ encodeURIComponent(email),
																success : function(
																		resp) {
																	console.log(resp);
																	if (resp == 0)
																		alert("Some error at server side occured, please try again later");
																	if (resp == 1) {
																		location
																				.reload(true);
																	}
																	if (resp == 2)
																		alert("id must contain digits");
																}
															});
												}
											});

							$('input[name="id"]').keyup(function() {
								$("#error-id").css("display", "none");
							});
							$('input[name="name"]').keyup(function() {
								$("#error-name").css("display", "none");
							});
							$('input[name="surname"]').keyup(function() {
								$("#error-surname").css("display", "none");
							});
							$('input[name="email"]').keyup(function() {
								$("#error-email").css("display", "none");
							});

							$("#teacher-pop-cancel").click(function(ev) {
								ev.preventDefault();
								$(".teacher-add-pop").css("display", "none");
								$(".shadow").css("display", "none");
							});
						});
	</script>
</body>
</html>